<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索框</title>
  <!-- <link rel="stylesheet" href="../list-iconfont/iconfont.css">
  <link rel="stylesheet" href="top.css">
  <link rel="stylesheet" href="./icon/iconfont.css">
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./code_loginit.css">
  <link rel="stylesheet" href="./2.css"> -->
  <link rel="stylesheet" href="../css/2.css">
  <link rel="stylesheet" href="../css/code_loginit.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/top.css">
  <link rel="stylesheet" href="../icon/iconfont.css">
  <link rel="stylesheet" href="../list-iconfont/iconfont.css">
</head>

<body>
  <div class="sun_top">
    <div class="sun_main">
      <div class="sun_logo"></div>
      <ul class="sun_work">
        <li class="active fixed"><a href="#" class="sun_discover">发现音乐</a></li>
        <li><a href="#" class="sun_my_music">我的音乐</a></li>
        <li><a href="#" class="sun_attention">关注</a></li>
        <li><a href="#" class="sun_shop">商城</a></li>
        <li><a href="#" class="sun_creator">音乐人</a></li>
        <li><a href="#" class="sun_push">云推歌</a></li>
        <li><a href="#" class="sun_load">下载客户端</a></li>
      </ul>
      <div class="sun_search">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" class="sun_search_input" placeholder="音乐，视频，电台，用户">
        <div class="sun_list disappear">
          <div class="sun_related">
            <p><a href="#">搜"<span class="sun_related_one"></span>"相关用户</a>&nbsp;></p>
          </div>
          <div class="sun_music pick">
            <div class="sun_item">
              <h3><span class="iconfont icon-yinle"></span><span>单曲</span></h3>
              <ul class="sun_name">
                <li></li>
              </ul>
            </div>
            <div class="sun_item">
              <h3><span class="iconfont icon-renwu-ren"></span>歌手<span></span></h3>
              <ul class="sun_author">
                <li></li>
              </ul>
            </div>
            <div class="sun_item">
              <h3><span class="iconfont icon-guangpan"></span>专辑<span></span></h3>
              <ul class="sun_album">
                <li></li>
              </ul>
            </div>
            <div class="sun_item">
              <h3><span class="iconfont icon-gedan"></span><span>歌单</span></h3>
              <ul>
                <li>霍钰佳喜欢高馨禾</li>
              </ul>
            </div>
          </div>
          <div class="sun_none unpick">
            <span>很抱歉~~~</span>
            <p>没有找到关于"<span class="content"></span>"的相关内容</p>
          </div>
        </div>
      </div>
      <a href="#" class="sun_center">
        <div class="creator_center">创作者中心</div>
      </a>
      <span class="sun_download">登录</span>
      <span class="header_img"><img src="../img/header.jpg"></span>
    </div>
  </div>

  <div class="log_box">
    <div class="log_black">
      <p>登录</p>
      <p>×</p>
    </div>
    <div class="log_in">

      <div class="log_email">
        <input type="text" class="account" placeholder="请输入邮箱账号">
      </div>

      <div class="email_incomplete">
        <i class="iconfont icon-cuowu"></i>
        <p class="wrong">邮箱账号格式错误，请更换后重试</p>
        <p class="empty">请输入邮箱账号</p>
      </div>
      <div class="log_verification">
        <div class="import">
          <input type="text" class="code" placeholder="请输入短信验证码">
        </div>
        <div class="acquire">
          <p>获取验证码</p>
        </div>
      </div>

      <div class="code_incomplete">
        <i class="iconfont icon-cuowu"></i>
        <p class="wrong">验证码错误，请重新输入</p>
        <p class="empty">请输入验证码</p>
      </div>


      <div class="in_password">
        <div class="import">
          <input type="password" class="password" placeholder="请输入初始密码">
          <span class="iconfont icon-biyan"></span>
        </div>
      </div>

      <div class="password_incomplete">
        <i class="iconfont icon-cuowu"></i>
        <p class="wrong">请输入8~16位数字、字母、下划线组合</p>
        <p class="empty">请输入初始密码</p>
      </div>

      <div class="log_log">
        <p class="log_log_log">注册</p>
      </div>

      <div class="log_repeat">
        <i class="iconfont icon-cuowu"></i>
        <div class="repeat">！！用户已存在,请前往密码登录界面</div>
      </div>


      <div class="log_password">
        <a href="#">密码登录</a>
      </div>

    </div>
    <!-- 密码登录 -->
    <div class="in_middle">

      <div class="in_email">
        <input type="text" class="account" placeholder="请输入邮箱账号">
      </div>
      <div class="email_incomplete">
        <i class="iconfont icon-cuowu"></i>
        <p class="wrong">邮箱账号格式错误，请更换后重试</p>
        <p class="empty">请输入邮箱账号</p>
      </div>
      <div class="in_password">
        <div class="import">
          <input type="password" class="password" placeholder="请输入密码">
          <a href="#" class="forget">忘记密码？</a>
        </div>
      </div>
      <div class="password_incomplete">
        <i class="iconfont icon-cuowu"></i>
        <p class="wrong">密码错误，请重新输入</p>
        <p class="empty">请输入密码</p>
      </div>
      <div class="password_notfound">
        <i class="iconfont icon-cuowu"></i>
        <div class="notfound">！！用户不存在,请前往注册界面</div>
      </div>
      <div class="in_automatic">
        <a href="#" class="in_code">短信注册</a>
        <div class="in_logy">
          <input type="checkbox" class="automatic">
          <p>自动登录</p>
        </div>
      </div>

      <div class="in_log">
        <p class="log_log_log">登录</p>
      </div>
    </div>

    <div class="log_other">
      <span>&lt;&nbsp;&nbsp;其他登录方式</span>
    </div>



    <!-- 登录首页 -->
    <div class="log_home">
      <div class="home_up">
        <img
          src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/34905050930/6160/8991/0f0f/85d4094a013dc7c0709fd198152ee9f7.png"
          class="way">
        <div class="right">
          <p class="qr-log">扫码登录</p>
          <img src="../img/qrcode.jpg">
          <p class="use">使用
            <span>网易云音乐app</span>扫码登录
          </p>
        </div>
      </div>
      <div class="home_down">
        <span>选择其他方式登录</span>
      </div>
    </div>

    <!-- 其他登录方式 -->
    <div class="other_way">
      <div class="up">
        <div class="left">
          <img
            src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9647707645/c8e7/4d8d/1895/6dff82b63181104bbac7cf3743c8b613.png"
            class="computer">
          <div class="reg_login">
            <div class="toRegister">
              <span>邮箱注册</span>
            </div>
            <div class="toLogin">
              <span>邮箱登录</span>
            </div>
          </div>
        </div>

        <div class="right">
          <img src="../img/tubiao.png" class="tubiao">
          <ul>
            <li><a href="#">微信登录</a></li>
            <li><a href="#">QQ登录</a></li>
            <li><a href="#">微博登录</a></li>
            <li><a href="#">网易邮箱账号登录</a></li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <input type="checkbox">
        <span>同意</span>
        <ul>
          <li><a href="http://st.music.163.com/official-terms/service" target="_blank">《服务条款》</a></li>
          <li><a href="http://st.music.163.com/official-terms/privacy" target="_blank">《隐私政策》</a></li>
          <li><a href="https://st.music.163.com/official-terms/children" target="_blank">《儿童隐私政策》</a></li>
        </ul>
      </div>
      <div class="right-down">
        <img
          src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9656441793/9f07/c197/3af2/f07b8d6ef20964be159ce812841fc9d2.png">
      </div>
    </div>
  </div>
  <div class="alert_box">
    <p>请先勾选同意《服务条款》、《隐私</p>
    <p>政策》、《儿童隐私政策》</p>
  </div>

  <!-- <script src="./top2.js"></script>
  <script src="./code_loginit.js"></script>
  <script src="./pub.js"></script>
  <script src="./password_loginit.js"></script>
  <script src="./top.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="../js/code_loginit.js"></script>
  <script src="../js/password_loginit.js"></script>
  <script src="../js/pub.js"></script>
  <script src="../js/top.js"></script>
  <script src="../js/top2.js"></script>
</body>

</html>